<template>
  <div class="echarts" style="width: 100%;height: 200px" id="myChart">
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'Echart',
  data () {
    return {}
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      this.chartLine = echarts.init(document.getElementById('myChart'))
      const option = {
        title: {
          text: '占比',
          left: 15,
          top: 12
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        color: ['#f5685f', '#c870d9', '#49a9ee', '#59d5c5'], // 指定扇形区域的颜色
        legend: {
          orient: 'vertical',
          // top: 'middle',
          left: 'center',
          data: ['现金', '减免车辆', '电子支付', 'ETC'],
          selectedMode: false, // 知否显示item名称
          show: false
        },
        series: [
          {
            type: 'pie',
            name: '占比',
            radius: ['45%', '70%'],
            data: [
              {
                value: 19558,
                name: '现金',
                label: {
                  formatter: function (params) {
                    return params.name + '\n\n' + +params.value
                  }
                }
              },
              {
                value: 825,
                name: '减免车辆',
                label: {
                  formatter: function (params) {
                    return params.name + '\n\n' + +params.value
                  }
                }
              },
              {
                value: 29334,
                name: '电子支付',
                label: {
                  formatter: function (params) {
                    return params.name + '\n\n' + +params.value
                  }
                }
              },
              {
                value: 20906,
                name: 'ETC',
                label: {
                  formatter: function (params) {
                    return params.name + '\n\n' + +params.value
                  }
                }
              }
            ],
            emphasis: {
              label: {
                show: true,
                fontSize: '15',
                fontWeight: 'bold'
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.chartLine.setOption(option)
    }
  }
}
</script>

<style scoped>

</style>
